<template>
  
  <div id="app">
    
      <!--5.  路由出口  -->
      <router-view></router-view>
      <!-- 路由导航 -->
      <p class="app_p">

        <router-link :to="{name:'home'}">首页</router-link>
        <router-link :to="{name:'find'}">发现</router-link>
        <router-link :to="{name:'mine'}">我</router-link>
        <router-link :to="{name:'ajax'}">ajax</router-link>
        <router-link :to="{name:'axios'}">axios</router-link>
      </p>
  </div>

</template>
<style  scoped>
.app_p{
  display: flex;
  justify-content: space-between;
  width: 500px;
  text-align: center;
  height: 50px;
  line-height: 50px;

}
.app_p a{
  width: 100px;
  height: 50px;
  cursor: pointer;
  border: 1px solid black;
  box-sizing: border-box;
  border-radius: 10px;
  text-decoration: none;
  /* color: #333; */
  font-weight: bold;
  font-size: 20px;
}
.router-link-exact-active, .router-link-active{

      color:red;
  }
</style>

